.m0 {
    margin: 0;
}
.m5 {
    margin: 5px;
}
.m10 {
    margin: 10px;
}

.m20 {
    margin: 20px;
}

.m30 {
    margin: 30px;
}

.m40 {
    margin: 40px;
}

.m50 {
    margin: 50px;
}

.mt10 {
    margin-top: 10px;
}

.mt15 {
    margin-top: 15px;
}
.mt20 {
    margin-top: 20px;
}

.mt30 {
    margin-top: 30px;
}

.mt40 {
    margin-top: 40px;
}

.mt50 {
    margin-top: 50px;
}

.mr10 {
    margin-right: 10px;
}

.mr20 {
    margin-right: 20px;
}

.mr30 {
    margin-right: 30px;
}

.mr40 {
    margin-right: 40px;
}

.mr50 {
    margin-right: 50px;
}

.mb10 {
    margin-bottom: 10px;
}

.mb20 {
    margin-bottom: 20px;
}

.mb30 {
    margin-bottom: 30px;
}

.mb40 {
    margin-bottom: 40px;
}

.mb50 {
    margin-bottom: 50px;
}

.ml10 {
    margin-left: 10px;
}
.ml15 {
    margin-left: 15px;
}
.ml20 {
    margin-left: 20px;
}

.ml30 {
    margin-left: 30px;
}

.ml40 {
    margin-left: 40px;
}

.ml50 {
    margin-left: 50px;
}

.mlr10 {
    margin-right: 10px;
    margin-left: 10px;
}

.mlr20 {
    margin-right: 20px;
    margin-left: 20px;
}

.mlr30 {
    margin-right: 30px;
    margin-left: 30px;
}

.mlr40 {
    margin-right: 40px;
    margin-left: 40px;
}

.mlr50 {
    margin-right: 50px;
    margin-left: 50px;
}

.mtb10 {
    margin-top: 10px;
    margin-bottom: 10px;
}

.mtb20 {
    margin-top: 20px;
    margin-bottom: 20px;
}

.mtb30 {
    margin-top: 30px;
    margin-bottom: 30px;
}

.mtb40 {
    margin-top: 40px;
    margin-bottom: 40px;
}

.mtb50 {
    margin-top: 50px;
    margin-bottom: 50px;
}

.p0 {
    padding: 0;
}
.p5 {
    padding: 5px;
}
.p10 {
    padding: 10px;
}
.p15 {
    padding: 20px;
}
.p20 {
    padding: 20px;
}
.p30 {
    padding: 30px;
}

.p40 {
    padding: 40px;
}

.p50 {
    padding: 50px;
}

.pt10 {
    padding-top: 10px;
}

.pt20 {
    padding-top: 20px;
}

.pt30 {
    padding-top: 30px;
}

.pt40 {
    padding-top: 40px;
}

.pt50 {
    padding-top: 50px;
}

.pr10 {
    padding-right: 10px;
}

.pr20 {
    padding-right: 20px;
}

.pr30 {
    padding-right: 30px;
}

.pr40 {
    padding-right: 40px;
}

.pr50 {
    padding-right: 50px;
}

.pb10 {
    padding-bottom: 10px;
}

.pb20 {
    padding-bottom: 20px;
}

.pb30 {
    padding-bottom: 30px;
}

.pb40 {
    padding-bottom: 40px;
}

.pb50 {
    padding-bottom: 50px;
}

.pl10 {
    padding-left: 10px;
}
.pl15 {
    padding-left: 15px;
}
.pl20 {
    padding-left: 20px;
}

.pl30 {
    padding-left: 30px;
}

.pl40 {
    padding-left: 40px;
}

.pl50 {
    padding-left: 50px;
}

.plr10 {
    padding-right: 10px;
    padding-left: 10px;
}

.plr20 {
    padding-right: 20px;
    padding-left: 20px;
}

.plr30 {
    padding-right: 30px;
    padding-left: 30px;
}

.plr40 {
    padding-right: 40px;
    padding-left: 40px;
}

.plr50 {
    padding-right: 50px;
    padding-left: 50px;
}

.ptb10 {
    padding-top: 10px;
    padding-bottom: 10px;
}

.ptb20 {
    padding-top: 20px;
    padding-bottom: 20px;
}

.ptb30 {
    padding-top: 30px;
    padding-bottom: 30px;
}

.ptb40 {
    padding-top: 40px;
    padding-bottom: 40px;
}

.ptb50 {
    padding-top: 50px;
    padding-bottom: 50px;
}

.vw100 {
    width: 100vh;
}
.vh100 {
    height: 100vh;
}
.w33 {
    width: 33.3333%;
}
.w34 {
    width: 34%;
}
.w20 {
    width: 20%;
}
.w50 {
    width: 50%;
}
.w80 {
    width: 80%;
}
.w100 {
    width: 100%;
}
.h100 {
    height: 100%;
}

/** flex **/
.flex {
    display: flex;
}
.flex1 {
    flex: 1;
}
.flex2 {
    flex: 2;
}
.flex3 {
    flex: 3;
}
.flex-basis20 {
    flex-basis: 20%;
}
.flex-basis40 {
    flex-basis: 40%;
}
.flex-basis50 {
    flex-basis: 50%;
}
.flex-basis60 {
    flex-basis: 60%;
}
.flex-basis80 {
    flex-basis: 80%;
}
.flex-col {
    flex-direction: column;
}
.flex-wrap {
    flex-wrap: wrap;
}
.align-start {
    align-items: flex-start;
}
.align-end {
    align-items: flex-end;
}
.align-center {
    align-items: center;
}
.justify-start {
    justify-content: flex-start;
}
.justify-end {
    justify-content: flex-end;
}
.justify-center {
    justify-content: center;
}
.justify-between {
    justify-content: space-between;
}
.justify-around {
    justify-content: space-around;
}
.self-start {
    align-self: flex-start;
}
.self-center {
    align-self: center;
}
.self-end {
    align-self: flex-end;
}
.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}
.flex-start {
    display: flex;
    align-items: center;
    justify-content: flex-start;
}
.flex-end {
    display: flex;
    align-items: center;
    justify-content: flex-end;
}
.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.flex-around {
    display: flex;
    align-items: center;
    justify-content: space-around;
}

/* 居中 */
.text-center {
    text-align: center;
}
.text-left {
    text-align: left;
}
.text-right {
    text-align: right;
}

/* 超出隐藏 */

.line1 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 1;

    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
}
.line2 {
    display: -webkit-box;
    overflow: hidden;
    text-overflow: ellipsis;
    -webkit-line-clamp: 2;

    /* autoprefixer: ignore next */
    -webkit-box-orient: vertical;
}

/** animation **/

/* fade */
.fade-enter-active,
.fade-leave-active {
    transition: opacity 0.23s;
}
.fade-enter,
.fade-leave-active {
    opacity: 0;
}

/* fade-transform */
.fade-transform-leave-active,
.fade-transform-enter-active {
    transition: all 0.4s;
}
.fade-transform-enter {
    opacity: 0;
    transform: translateX(-5px);
}
.fade-transform-leave-to {
    opacity: 0;
    transform: translateX(5px);
}
